<template>
	<view class="order-set">
		<uni-forms :modelValue="formData">
			<view class="ban">
				<uni-forms-item required label="姓名" name="username">
					<input inputBorder="false" class="no-border-input" type="text" v-model="formData.username" :styles="styles" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item required label="取消设置" label-width="100px">
					
					<uni-data-picker placeholder="" 
					popup-title="请选择" :localdata="dataTree" 
					v-model="formData.isCancel"><text>随时可取消 ></text>
					</uni-data-picker>

				</uni-forms-item>
			</view>
			<view class="ban1" @click="goSetDate">
				<uni-forms-item required label="预约时段排期设置" label-width="150px" @click="goSetDate">
					<text>40天可约 ></text>
				</uni-forms-item>
			</view>
			<view class="ban2">
				<uni-forms-item required label="服务价格" name="price" label-width="100px">
					<input type="text" placeholder="请输入价格" v-model="formData.price">
				</uni-forms-item>
				<uni-forms-item required label="学历" name="school">
					<uni-combox :border="false" :candidates="diploma" :placeholder="formData.school" v-model="formData.school"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required label="等级" name="name">
					<uni-combox :border="false" :candidates="levelList" :placeholder="formData.level" v-model="formData.level"></uni-combox>
					<!-- <text>金牌 ></text> -->
				</uni-forms-item>
				<uni-forms-item required label="星级" name="name">
					<!-- <text>4星 ></text> -->
					<uni-combox :border="false" :candidates="starList" :placeholder="formData.star+'星'" v-model="formData.star">6</uni-combox>
				</uni-forms-item>
				<uni-forms-item required name="certificate" label="证书">
					<text>至少选择2项</text>
				</uni-forms-item>
				<!-- <uni-forms-item> -->
					<view class="check-box">
						<uni-data-checkbox multiple v-model="formData.certificate" :localdata="certificateList"/>
					</view>
				<!-- </uni-forms-item> -->
				<uni-forms-item required label="属相" name="name">
					<uni-combox :border="false" :candidates="birthYear" :placeholder="formData.birth_year" v-model="formData.birth_year"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required label="民族" name="name">
					<uni-combox :border="false" :candidates="nationList" :placeholder="formData.nation" v-model="formData.nation"></uni-combox>
				</uni-forms-item>
				<uni-forms-item required label="年龄" style="display: flex;justify-content: flex-start;">
					<input type="text" placeholder="请输入年龄" v-model="formData.age">
				</uni-forms-item>
				<uni-forms-item required label="经验">
					<input type="text" placeholder="请输入经验时间" v-model="formData.experience">
				</uni-forms-item>
				<uni-forms-item required label="籍贯">
					<input type="text" placeholder="请输入籍贯" v-model="formData.native_place">
				</uni-forms-item>
				<uni-forms-item required label="特点标签" label-width="160rpx">
					
				</uni-forms-item>
				<uni-forms-item>
					<input type="text" placeholder="请输入标签" v-model="formData.disc">
					<view class="tip">
						多个标签请用逗号分隔开
					</view>
				</uni-forms-item>
				<uni-forms-item required label="封面图片上传(必填)" name="name" label-width="320rpx">
					<text>(每张不能超过10M)</text>
				</uni-forms-item>
				<uni-forms-item>
					<image src="../../static/uni.png" mode="" class="upload"></image>
				</uni-forms-item>
			</view>
		</uni-forms>
		<button @click="submitForm">提交</button>
	</view>
</template>

<script>
	import { AddHelper } from '../../api/index.js'
	export default {
		data() {
			return {
				formData:{
					username:'',
					isCancel:'随时可取消',
					days:30,
					price:100,
					school:'初中',
					level:'金牌',
					star:3,
					certificate:'',
					birth_year:'羊',
					nation:'汉族',
					age:'',
					experience:'',
					native_place:'',
					disc:'',
					avatar:''
				},
				certificateList:[
					{text:'背调合格',value:'背调合格'},
					{text:'保证金已缴纳',value:'保证金已缴纳'},
					{text:'身份证',value:'身份证'},
					{text:'健康证',value:'健康证'},
					{text:'体检报告',value:'体检报告'},
					{text:'执业证书',value:'执业证书'}
				],
				styles:{
					// color: '#2979FF',
					borderColor: '#fff'
				},
				dataTree:[
					{text:'随时可以取消',value:true},
					{text:'不可以取消',value:false},
				],
				classes:'',
				levelList: ['金牌','银牌'],
				diploma:['小学','初中','高中','职高','专科','本科','研究生'],
				starList:['0','1','2','3','4','5'],
				birthYear:['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'],
				nationList:['汉族','回族','藏族','苗族','壮族','傣族','少数民族']
				
			};
		},
		onLoad() {
			this.formData = JSON.parse(uni.getStorageSync('userinfohelper')||'')
		},
		methods:{
			goSetDate(){
				console.log('gogog')
				uni.navigateTo({
					url:'/subPackageHH/TimeSet/TimeSet'
				})
			},
			getValue(e){
				console.log(e,'yemian')
				this.selectedList = e.selected
				// this.formData.date_time = 
				let dateTimeStr = ''
				let timeStr = ''
				e.selected.forEach(item=>{
					dateTimeStr += item.date+'*'+item.info+','
				})
				e.time.forEach(item=>{
					timeStr += item.start+'-'+item.end+'*'+item.status+','
				})
				console.log(dateTimeStr,'datetimestr')
				this.formData.date_time = dateTimeStr
				
				this.formData.time = timeStr
				console.log(timeStr,'timestr')
			},
			async submitForm(){
				console.log(this.formData)
				this.formData.certificate=this.formData.certificate.join(',')
				const { data:res } = await AddHelper(this.formData)
				console.log(res,'hhhh')
			}
		}
	}
</script>

<style lang="scss">
	.no-border-input:focus {
	    border: none; /* 去掉边框 */
	    outline: none; /* 去掉聚焦时的轮廓 */
	  }
	  .is-input-border{
		  border: none;
	  }
.order-set{
	padding: 20rpx;
	.uni-forms{
		// background: #fff;
		padding: 20rpx;
		.ban{
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.uni-forms-item:nth-child(1){
				display: flex;
				justify-content: flex-start;
				.no-border-input:focus {
				    border: none; /* 去掉边框 */
				    outline: none; /* 去掉聚焦时的轮廓 */
				  }
			}
			.no-border-input:focus {
			    border: none; /* 去掉边框 */
			    outline: none; /* 去掉聚焦时的轮廓 */
			  }
			
		}
		.ban1{
			background: #FFFACD;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
		.ban2{
			background: #fff;
			border-radius: 10rpx;
			.uni-forms-item:nth-child(1){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(1){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(3){
				display: flex;
				justify-content: flex-start;
				.tip{
					font-size: 28rpx;
					color: #888;
					margin-top: 10rpx;
				}
			}
			.uni-forms-item:nth-last-child(5){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(6){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(7){
				display: flex;
				justify-content: flex-start;
			}
		}
		.uni-forms-item{
			border-bottom: 1px solid #eee;
			margin-bottom: 10rpx;
			// border: 1px solid #000;
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// flex-wrap: wrap;
			.uni-forms-item__content{
				flex: none;
			}
			.uni-forms-item__label{
				font-weight: 800;
			}
			.red{
				color: red;
			}
			
		}
		.check-box{
			display: flex!important;
			flex-wrap: wrap!important;
			padding: 10rpx 20rpx;
			border-bottom: 1px solid #eee;
		}
		.uni-combox{
			width: 100rpx;
		}
	}
	.upload{
		width: 100rpx;
		height: 100rpx;
	}
	button{
		width: 70%;
		line-height: 60rpx;
		height: 60rpx;
		background: aqua;
		margin-top: 30rpx;
		color: #fff;
	}
}
</style>
